/<template>
  <div class="list">
    <Alert :show="show">
      <div v-if="goods[index]">
        <img :src="goods[index].img" alt="" />
        <h3>{{ goods[index].title }}</h3>
      </div>
    </Alert>
    <dl v-for="(item,index) in goods" :key="index">
      <dt>
        <img :src="item.img" alt="" @click="showAlert(index)">
      </dt>
      <dd>
        <h4>{{item.title}}</h4>
        <p>
          <b>{{item.price}}</b>
          <span>已拼{{item.num|getWan}}件</span>
        </p>
      </dd>
    </dl>
  </div>
</template>

<script>
import axios from "axios";
import Alert from "./Alert.vue";
export default {
  components: {
    Alert,
  },
  data()
  {
    return{
      goods:[],
      show:false,
      index:0
    }
  },
  mounted(){
    axios.get("/goods").then((res) => {
      this.goods=res.data;
    })
    this.bus.$on("closeShow",()=>
    {
      this.show=false;
    })
  },
  methods:{
    showAlert(index)
    {
      this.show=true;
      this.index=index;
    }
  },
  // 过滤器， 用作格式化文本
  filters: {
    // 是封装的filter方法，用作把炒过万的数字，变成数字+‘万’
    getWan(value) {
      // console.log(value);
      if (value >= 10000) {
        return (value / 10000).toFixed(2) + "万";
      } else {
        return value;
      }
    }
  },
}
</script>

<style lang="scss">
/* .list{
  display: flex;
  flex-direction: column;
} */
.list dl{
  width: 48%;
  height: 200px;
  background-color: rgb(198, 199, 255);
  margin-top: 5px;
  float: left;
  margin-left: 1px;
  dt img{
    margin-top: 15px;
  }
}
h4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>